<template>
  <div class="leftuppercontainer">
    <Card title="应急力量">
      <table border="0">
        <thead>
          <tr>
            <td>姓名</td>
            <td class="color-font">电话</td>
            <td class="color-font">所属班次</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ tableData.sumWhite || "暂无" }}</td>
            <td>{{ tableData.sumWhitePhone || "暂无" }}</td>
            <td>总值班-白班</td>
          </tr>
          <tr>
            <td>{{ tableData.sumBlack || "暂无" }}</td>
            <td>
              {{ tableData.sumBlackPhone || "暂无" }}
            </td>
            <td>总值班-夜班</td>
          </tr>
          <tr>
            <td>{{ tableData.security || "暂无" }}</td>
            <td>{{ tableData.securityPhone || "暂无" }}</td>
            <td>安保值班</td>
          </tr>
          <tr>
            <td>{{ tableData.companyLeader || "暂无" }}</td>
            <td>{{ tableData.companyLeaderPhone || "暂无" }}</td>
            <td>公司领导</td>
          </tr>
        </tbody>
      </table>
    </Card>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import Card from "./Card.vue";

export default defineComponent({
  name: "EmergencyForce",
  components: {
    Card,
  },
  setup() {
    return {
      tableData: {},
    };
  },
  mounted() {},
  methods: {
    setData(data) {
      this.tableData = data;
    },
  },
});
</script>
<style lang="scss" scoped>
table {
  // text-align: center;
  color: #fff;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

table tbody {
  display: block;
  font-size: 12px;
}

table thead,
tbody tr {
  display: table;
  width: 100%;
  margin: 10px 0;
  table-layout: fixed;
}

table tbody tr td {
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.color-font {
  color: #ffc916;
}

table thead {
  font-size: 12px;
}
</style>
